import Button from "@/components/common/Button";
import classes from "./index.module.css";
import { useRef } from "react";
const FoodTruckSearch = (props) => {
  const addressInputRef = useRef();
  const foodInputRef = useRef();

  const foods = [
    "hamburger",
    "melts",
    "hot dogs",
    "sandwiches",
    "rice",
    "cookies",
    "ice cream",
    "candies",
    "donuts",
    "juice",
    "milk",
    "noodles",
    "salad",
  ];
  const submitHandler = (e) => {
    e.preventDefault();
    const selectedAddress = addressInputRef.current.value;
    const selectedFood = foodInputRef.current.value;

    props.onSearch({ address: selectedAddress, food: selectedFood });
  };
  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <div className={classes.controls}>
        <div className={classes.control}>
          <label htmlFor="address">address</label>
          <input id="address" type="text" ref={addressInputRef} />
        </div>
        <div className={classes.control}>
          <label htmlFor="food">food</label>
          <select id="food" ref={foodInputRef}>
            {foods.map((food, index) => (
              <option key={index} value={food}>
                {food}
              </option>
            ))}
          </select>
        </div>
      </div>
      <Button>Search FoodTruck</Button>
    </form>
  );
};

export default FoodTruckSearch;
